<template>
  <section
    class="flex items-center gap-x-4 h-7 w-full px-2 bg-[#e2e9e0] text-xs"
  >
    <div class="item">字数: {{ wordCount }}</div>
    <li />
    <div class="item active-item" @click="toggleSpellcheck(!spellcheck)">
      拼写检查: {{ spellcheck ? "打开" : "关闭" }}
    </div>
    <li />
    <div class="item">文章更新于 : {{ formatDate(lastUpdateTime) }}</div>
  </section>
</template>

<script setup lang="ts">
import { useArticleStore } from "@/stores/article";
import { storeToRefs } from "pinia";

const props = defineProps<{
  content: string;
  spellcheck: boolean;
}>();

const emit = defineEmits<{
  (e: "update:spellcheck", value: boolean): void;
}>();

const toggleSpellcheck = (value: boolean) => {
  emit("update:spellcheck", value);
};

const formatDate = (timestamp: number) => {
  if (!timestamp) return "未更新";
  const date = new Date(timestamp);
  return date.toLocaleString();
};

const wordCount = computed(() => {
  const text = props.content
    .replace(/<[^>]+>/g, "") // 移除HTML标签
    .replace(/&nbsp;/g, " ") // 将HTML空格转换为普通空格
    .replace(/\s+/g, " "); // 将连续空格合并为一个

  const cnChars = text.match(/[\u4e00-\u9fa5]/g)?.length || 0; // 中文字符
  const enWords = text.match(/[a-zA-Z]+/g)?.length || 0; // 英文单词
  const numbers = text.match(/\d+/g)?.length || 0; // 数字
  const symbols = text.match(/[^\u4e00-\u9fa5a-zA-Z0-9\s]/g)?.length || 0; // 符号

  return cnChars + enWords + numbers + symbols;
});

const { lastUpdateTime } = storeToRefs(useArticleStore());
</script>

<style scoped>
.active-item {
  @apply hover:bg-[#c4c7c2] cursor-pointer;
}

.item {
  @apply flex items-center justify-center h-full px-2;
}

li {
  list-style: none;
  height: 60%;
  background-color: gray;
  width: 1px;
}
</style>
